<%--

Copyright 2010 mazhao.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
under the License.

    Document   : product
    Created on : Sep 26, 2010, 3:27:32 PM
    Author     : mazhao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Product Page</title>
    <script type="text/javascript" charset="utf-8">
        // ---- for jquery.debug.js plugin ----
        DEBUG = true;

        $(document).ready(function() {

            // product row click function
            $("table#productTable tbody tr").mousedown(function() {
                $("tr.selected").removeClass("selected");
                $(this).addClass("selected");

                // load edit form and images
                loadForm();
                loadImage();

                // show edit view and image view
                $("#imageUploadDiv").css("visibility", "visible");
                $("#productDiv").css("visibility", "visible");

            });


            $("#productForm_operationTypeupdate").click(function() {
                $("#productForm").attr("action", "<%= request.getContextPath()%>/management/productupdate.action");
                loadForm();
                enableForm();
            });

            $("#productForm_operationTypedelete").click(function() {
                $("#productForm").attr("action", "<%= request.getContextPath()%>/management/productdelete.action");
                loadForm();
                disableForm();
            });

            $("#productForm_operationTypecreate").click(function() {
                $("#productForm").attr("action", "<%= request.getContextPath()%>/management/productcreate.action");
                // clearForm();
                enableForm();
            });

        });

        function loadForm() {
            $.log("load form");
            // edit form
            $("#productForm_id").val($("tr.selected").children(":nth-child(1)").html());
            $("#productForm_catalogId").val($("tr.selected").children(":nth-child(2)").html());
            $("#productForm_name").val($("tr.selected").children(":nth-child(3)").html());
            $("#productForm_description").val($("tr.selected").children(":nth-child(4)").html());
            $("#productForm_originalPrice").val($("tr.selected").children(":nth-child(5)").html());
            $("#productForm_memberPrice").val($("tr.selected").children(":nth-child(6)").html());
            $("#productForm_specialPrice").val($("tr.selected").children(":nth-child(7)").html());
            $("#productForm_discount").val($("tr.selected").children(":nth-child(8)").html());
            $("#productForm_point").val($("tr.selected").children(":nth-child(9)").html());
            $("#productForm_star").val($("tr.selected").children(":nth-child(10)").html());
            // upload form
            $("#uploadForm_currentProductId").val($("tr.selected").children(":nth-child(1)").html());
            $("#uploadForm_currentCatalogId").val($("tr.selected").children(":nth-child(2)").html());
        }

        function loadImage() {
            $.log("load image begin ");

            // delete old image
            $("table#imageTable tbody tr").each(function() {
                $(this).remove();
            });

            $.post("<%= request.getContextPath()%>/management/onthefly/listimages.action",
            {"productId": $("tr.selected").children(":nth-child(1)").html()},
                    loadImageImpl,
                    "json");
            $.log("load image end ");
        }

        function loadImageImpl(data) {
            $.log("begin loadImageImpl");

            $.log("image size:" + data.images.length);
            for (var i = 0; i < data.images.length; i++) {
                $.log("image path:" + data.images[i]);
                var trStr =
                        "<tr id='imageTr" + i + "'>" +
                                "<td>" + i + "</td>" +
                                "<td><img src='<%=request.getContextPath()%>/management/productshowimage.action?path=" + data.images[i] + "' alt='shopping logo' width='100px' height='100px' /></td>" +
                                "<td><button onclick=deleteImage('imageTr" + i + "')>Delete</button></td>" +
                                "</tr>";
                $("table#imageTable tbody").append(trStr);
            }
            $.log("end loadImageImpl");
        }

        function deleteImage(trId) {
            $.log("enter delete image.");
            $.log("trid:" + trId);
            var href = $("tr#" + trId + " td img").attr("src");
            var path = href.substring(href.indexOf("path=") + "path=".length);
            $.log("delete file path:" + path);
            $.post("<%= request.getContextPath()%>/management/onthefly/deleteimage.action",
            {"path": path},
                    deleteImageSuccess(trId),
                    "json");
            $.log("delete image after")
        }

        function deleteImageSuccess(trId) {
            $("tr#" + trId).remove();
        }

        function clearForm() {
            $("#productForm_name").val("");
            $("#productForm_description").val("");
            $("#productForm_originalPrice").val("");
            $("#productForm_memberPrice").val("");
            $("#productForm_specialPrice").val("");
            $("#productForm_discount").val("");
            $("#productForm_point").val("");
            $("#productForm_star").val("");
        }
        function disableForm() {
            $("#productForm_name").attr("readonly", "readonly");
            $("#productForm_description").attr("readonly", "readonly");
            $("#productForm_originalPrice").attr("readonly", "readonly");
            $("#productForm_memberPrice").attr("readonly", "readonly");
            $("#productForm_specialPrice").attr("readonly", "readonly");
            $("#productForm_discount").attr("readonly", "readonly");
            $("#productForm_point").attr("readonly", "readonly");
            $("#productForm_star").attr("readonly", "readonly");
        }

        function enableForm() {
            $("#productForm_name").attr("readonly", "");
            $("#productForm_description").attr("readonly", "");
            $("#productForm_originalPrice").attr("readonly", "");
            $("#productForm_memberPrice").attr("readonly", "");
            $("#productForm_specialPrice").attr("readonly", "");
            $("#productForm_discount").attr("readonly", "");
            $("#productForm_point").attr("readonly", "");
            $("#productForm_star").attr("readonly", "");

        }
    </script>
</head>
<body>
<h1>This is product page</h1>

<div id="catalogChooseDiv">
    please choose catalog <br/>
    <s:iterator value="catalogPath" var="cat">
        <s:url id="enterCatalogUrl" action="productlist" namespace="/management">
            <s:param name="currentCatalogId" value="%{id}"/>
        </s:url>
        → <s:a href="%{enterCatalogUrl}"><s:property value="name"/></s:a>
    </s:iterator>
    <br/>
    <s:iterator value="subCatalog" var="cat">
        <s:url id="enterCatalogUrl" action="productlist" namespace="/management">
            <s:param name="currentCatalogId" value="%{id}"/>
        </s:url>
        <s:a href="%{enterCatalogUrl}"><s:property value="name"/></s:a> &nbsp;&nbsp;&nbsp;&nbsp;
    </s:iterator>
</div>
<div id="productListDiv">
    Then product list show here, click product list item here!<br/>
    <table id="productTable" align="left">
        <thead>
        <tr>
            <td>ID</td>
            <td>Catalog</td>
            <td>Name</td>
            <td>Description</td>
            <td>Original Price</td>
            <td>Member Price</td>
            <td>Special Price</td>
            <td>Discount</td>
            <td>Point</td>
            <td>Star</td>
        </tr>
        </thead>
        <tbody>
        <s:iterator value="productList" var="product">
            <tr>
                <td><s:property value="id"/></td>
                <td><s:property value="catalogId"/></td>
                <td><s:property value="name"/></td>
                <td><s:property value="description"/></td>
                <td><s:property value="originalPrice"/></td>
                <td><s:property value="memberPrice"/></td>
                <td><s:property value="specialPrice"/></td>
                <td><s:property value="discount"/></td>
                <td><s:property value="point"/></td>
                <td><s:property value="star"/></td>
            </tr>
        </s:iterator>
        </tbody>
    </table>

</div>
<div id="productDiv" style="visibility: hidden">
    then product detail show in edit form, you can delete, update, or insert new <br/>
    <s:form namespace="/management" action="productupdate" id="productForm">
        <s:textfield readonly="true" name="id" key="product.id"/>
        <!-- first time for current catalog id, then for selected catalog id -->
        <s:textfield readonly="true" name="catalogId" value="%{currentCatalogId}" key="product.catalog_id"/>
        <s:textfield name="name" key="product.name" cssClass="textfield"/>
        <s:textarea name="description" key="product.description"/>
        <s:textfield name="originalPrice" key="product.original_price"/>
        <s:textfield name="memberPrice" key="product.member_price"/>
        <s:textfield name="specialPrice" key="product.special_price"/>
        <s:textfield name="discount" key="product.discount"/>
        <s:textfield name="point" key="product.point"/>
        <s:textfield name="star" key="product.star"/>
        <s:radio name="operationType" list="operationTypes" key="product.operation_type"/>
        <s:submit/>
    </s:form>
</div>
<div id="imageUploadDiv" style="visibility: hidden">
    This is the image upload div, first select product to upload image, the selected image to upload, the upload.
    <table id="imageTable">
        <thead>
        <tr>
            <td>No.</td>
            <td>Image</td>
            <td>Operation</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td><img src="<%=request.getContextPath()%>/images/shopping.jpg" alt="shopping logo" width="100px"
                     height="100px"/></td>
            <td>
                <button>Delete</button>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="<%=request.getContextPath()%>/images/shopping.jpg" alt="shopping logo" width="100px"
                     height="100px"/></td>
            <td>
                <button>Delete</button>
            </td>
        </tr>
        </tbody>
    </table>
    <s:form id="uploadForm" namespace="/management" action="productupload" method="post" enctype="multipart/form-data">
        <s:hidden name="currentProductId"/>
        <s:hidden name="currentCatalogId"/>
        <s:file name="image" title="Upload" label="Upload New Images" accept="*.jpg">Upload</s:file>
        <s:submit/>
    </s:form>
</div>
</body>
</html>
